/**
 * 目录：
 * 全局变量定义
 * 数据管理相关方法
 * 用户认证相关方法
 * 权限管理相关方法
 * 导航相关方法
 * 搜索相关方法
 * 模态框相关方法
 * Toast 提示相关方法
 * 生命周期
 * 返回值
 */

const { createApp, ref, computed, onMounted } = Vue;

const app = createApp({
    setup() {
        /// ==================== 全局变量定义 ====================
        //. Token
        let token = localStorage.getItem('token') || null;
        //. Base URL
        const BASE_URL = baseUrl; //. 这里是从url.js引入的baseUrl
        //. 默认headers
        axios.defaults.headers.common['Authorization'] = token;

        /// ==================== 数据管理相关方法 ====================

        //. 网站数据
        const sites = ref([]);

        //. 分类列表
        const groupList = ref([]);

        //. 当前选择的分类
        const selectedCategory = ref('all');

        //. 获取网站数据
        const fetchSites = async () => {
            try {
                const response = await axios.get(`${BASE_URL}/data/getDataByDimName`);
                if (response.data.code === 200) {
                    sites.value = response.data.data;
                } else {
                    showToast('获取数据失败', 'error');
                }
            } catch (error) {
                console.error('获取网站数据失败:', error);
                showToast('获取数据失败，请稍后重试', 'error');
            }
        };

        //. 获取全部分类名称
        const categories = computed(() => {
            const uniqueCategories = new Set(sites.value.map(site => site.group));
            return Array.from(uniqueCategories);
        });

        //. 切换分类
        const changeCategory = (category) => {
            selectedCategory.value = category.target.value;
        };

        //. 过滤网站数据 - 只显示权限小于等于当前用户权限的数据，并根据分类过滤
        const filteredSites = computed(() => {
            //. 首先根据权限过滤
            let filtered = sites.value.filter(site =>
                currentUser.value && currentUser.value.permission >= site.permission &&
                (site.permission == selectedPermission.value || selectedPermission.value == -1)
            );

            //. 如果选择了特定分类，且不是"全部"，则过滤该分类
            if (selectedCategory.value !== 'all') {
                filtered = filtered.filter(site => site.group === selectedCategory.value);
            }

            return filtered;
        });

        //. 编辑数据
        const editSite = (site) => {
            formData.value = {
                id: site.id,
                name: site.name,
                desc: site.desc,
                src: site.src,
                permission: Number(site.permission),
                ico: site.ico || '',
                group: site.group
            };
            isEditing.value = true;
            showModal.value = true;
        };

        //. 保存数据
        const saveData = async () => {
            try {
                //. 表单验证
                if (!formData.value.name) {
                    showToast('请输入名称', 'warning');
                    return;
                }
                if (!formData.value.desc) {
                    showToast('请输入描述', 'warning');
                    return;
                }
                if (!formData.value.src) {
                    showToast('请输入链接', 'warning');
                    return;
                }
                if (!formData.value.group) {
                    showToast('请输入分类', 'warning');
                    return;
                }

                const data = {
                    ...formData.value,
                    permission: Number(formData.value.permission)
                };

                let response;
                if (isEditing.value) {
                    //. 编辑现有数据
                    response = await axios.put(`${BASE_URL}/data/updateData`, data);
                } else {
                    //. 添加新数据
                    response = await axios.post(`${BASE_URL}/data/addData`, data);
                }

                if (response.data.code === 200) {
                    showToast(isEditing.value ? '更新成功' : '添加成功', 'success');
                    closeModal();
                    await fetchSites(); //. 重新获取数据列表
                } else {
                    showToast(response.data.message || '操作失败', 'error');
                }
            } catch (error) {
                console.error('保存失败:', error);
                showToast('保存失败，请稍后重试', 'error');
            }
        };

        //. 删除数据
        const deleteSite = async (site) => {
            if (!confirm('确定要删除该数据吗？')) {
                return;
            }

            try {
                const response = await axios.delete(`${BASE_URL}/data/deleteData`, {
                    params: {
                        id: site.id
                    }
                });
                if (response.data.code === 200) {
                    showToast('删除成功', 'success');
                    //. 重新获取数据
                    await fetchSites();
                } else {
                    showToast(response.data.message || '删除失败', 'error');
                }
            } catch (error) {
                console.error('删除失败:', error);
                showToast('删除失败，请稍后重试', 'error');
            }
        };

        //. 是否是小屏幕设备
        const isMobile = ref(false);

        //. 核心检测逻辑
        const detect = () => {
            const ua = navigator.userAgent || navigator.vendor || window.opera;
            const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
            const screenWidth = window.innerWidth || document.documentElement.clientWidth;

            //. 用户代理检测（覆盖主流移动设备）
            const uaPattern = /(android|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile|harmony)/i;

            //. 组合判断条件
            isMobile.value = uaPattern.test(ua) && (hasTouch || screenWidth < 768);
        };

        //. 选择的权限
        //. 这里的权限值是根据实际需求设置的，0表示游客，1表示用户，2表示会员，3表示管理员，4表示超级管理员，5表示开发者
        const selectedPermission = ref(-1);

        //. 改变权限
        const changePermission = (permission) => {
            selectedPermission.value = permission.target.value;
        }

        //. 跳转到指定页面
        const goToPage = (site) => {
            // 在新标签页打开链接
            window.open(site.src, '_blank');
        }

        /// ==================== 用户认证相关方法 ====================

        //. 默认用户信息
        const defaultUser = {
            id: 0,
            username: '游客',
            phone: '',
            permission: 0,
            recorddate: '',
            email: '',
            logintime: '',
            collection: ''
        };

        //. 当前用户信息
        const currentUser = ref(defaultUser);
        //. 检查登录状态
        const checkLoginStatus = async () => {
            try {
                //. 如果没有token，直接重定向
                if (!token) {
                    showToast('请先登录', 'error');
                    setTimeout(() => {
                        window.location.href = '../../index.html';
                    }, 1500);
                    return;
                }

                //. 获取用户信息
                const response = await axios.post(`${BASE_URL}/user/getUserByToken`);

                if (response.data.code === 200) {
                    //. 设置当前用户信息
                    currentUser.value = response.data.data;

                    //. 获取用户权限
                    const userPermission = currentUser.value.permission;

                    //. 判断权限 - 允许管理员(3)、超级管理员(4)和开发者(5)访问
                    if (userPermission === 3 || userPermission === 4 || userPermission === 5) {
                        //. 允许访问，获取数据
                        await fetchSites();
                        return;
                    } else {
                        //. 其他权限，显示提示并重定向
                        showToast('您没有权限访问此页面', 'error');
                        setTimeout(() => {
                            window.location.href = '../../index.html';
                        }, 1500);
                    }
                } else {
                    //. 获取用户信息失败，重定向到首页
                    showToast('请先登录', 'error');
                    setTimeout(() => {
                        window.location.href = '../../index.html';
                    }, 1500);
                }
            } catch (error) {
                //. 发生错误，重定向到首页
                showToast('系统错误，请稍后重试', 'error');
                setTimeout(() => {
                    window.location.href = '../../index.html';
                }, 1500);
            }
        };

        //. 退出登录
        const logout = async () => {
            try {
                //. 清除本地存储的token
                localStorage.removeItem('token');

                //. 清除axios默认headers中的token
                delete axios.defaults.headers.common['Authorization'];

                //. 重置用户状态
                currentUser.value = defaultUser;

                //. 显示退出成功提示
                showToast('已成功退出登录', 'success');

                //. 延迟跳转到首页
                setTimeout(() => {
                    window.location.href = '../../index.html';
                }, 1500);
            } catch (error) {
                console.error('退出登录失败:', error);
                showToast('退出登录失败，请重试', 'error');
            }
        };

        /// ==================== 权限管理相关方法 ====================
        //. 获取权限等级文本
        const getPermissionText = (permission) => {
            const permissionMap = {
                0: '游客',
                1: '用户',
                2: '会员',
                3: '管理员',
                4: '超级管理员',
                5: '开发者'
            };
            return permissionMap[permission] || '未知';
        };

        //. 获取权限等级样式类
        const getPermissionClass = (permission) => {
            const classMap = {
                0: 'visitor',
                1: 'user',
                2: 'member',
                3: 'admin',
                4: 'super-admin',
                5: 'developer'
            };
            return classMap[permission] || 'visitor';
        };
        /// ==================== 导航相关方法 ====================
        //. 返回首页
        const goBack = () => {
            window.location.href = '../../index.html';
        };

        /// ==================== 搜索相关方法 ====================

        //. 搜索相关变量
        const searchQuery = ref('');
        const isSearching = ref(false);

        //. 统一搜索方法
        const search = async () => {
            if (!searchQuery.value) {
                showToast('请输入搜索内容', 'warning');
                return;
            }

            try {
                isSearching.value = true;
                let response;

                //. 判断是否为纯数字（ID查询）
                if (/^\d+$/.test(searchQuery.value)) {
                    //. ID查询
                    response = await axios.get(`${BASE_URL}/data/getDataById`, {
                        params: {
                            id: searchQuery.value
                        }
                    });

                    if (response.data.code === 200) {
                        //. 将单个结果转换为数组
                        sites.value = [response.data.data];
                        showToast('ID查询成功', 'success');
                        return;
                    }
                }

                //. 名称查询
                response = await axios.get(`${BASE_URL}/data/getDataByDimName`, {
                    params: {
                        name: searchQuery.value
                    }
                });

                if (response.data.code === 200 && response.data.data && response.data.data.length > 0) {
                    sites.value = response.data.data;
                    showToast('名称查询成功', 'success');
                    return;
                }

                //. 如果名称查询没有结果，尝试描述查询
                response = await axios.get(`${BASE_URL}/data/getDataByDesc`, {
                    params: {
                        desc: searchQuery.value
                    }
                });

                if (response.data.code === 200) {
                    sites.value = response.data.data;
                    showToast('描述查询成功', 'success');
                } else {
                    showToast('未找到匹配的数据', 'info');
                }
            } catch (error) {
                console.error('查询失败:', error);
                showToast('查询失败，请稍后重试', 'error');
            } finally {
                isSearching.value = false;
            }
        };

        //. 重置搜索
        const resetSearch = async () => {
            searchQuery.value = '';
            selectedCategory.value = 'all';
            selectedPermission.value = -1;
            isSearching.value = false;

            //. 重新获取所有数据
            await fetchSites();
            showToast('已重置搜索条件', 'info');
        };

        //. 获取分类列表
        const fetchGroupList = async () => {
            try {
                const response = await axios.get(`${BASE_URL}/group/getGroupList`);
                if (response.data.code === 200) {
                    groupList.value = response.data.data.map(item => item.name);
                }
            } catch (error) {
                console.error('获取分类列表失败:', error);
                showToast('获取分类列表失败', 'error');
            }
        };

        /// ==================== 模态框相关方法 ====================

        //. 显示添加模态框
        const showAddModal = () => {
            formData.value = {
                id: '',
                name: '',
                desc: '',
                src: '',
                permission: 0,
                ico: 'https://s21.ax1x.com/2025/02/18/pEMUkQA.png',
                group: selectedCategory.value !== 'all' ? selectedCategory.value : ''
            };
            isEditing.value = false;
            showModal.value = true;
        };

        //. 关闭模态框
        const closeModal = () => {
            showModal.value = false;
            setTimeout(() => {
                formData.value = {
                    id: '',
                    name: '',
                    desc: '',
                    src: '',
                    permission: 0,
                    ico: '',
                    group: ''
                };
                isEditing.value = false;
            }, 300);
        };

        //. 模态框相关变量 - 确保所有变量都被正确初始化
        let showModal = ref(false);
        const isEditing = ref(false);
        const formData = ref({
            id: '',
            name: '',
            desc: '',
            src: '',
            permission: 0,
            ico: '',
            group: ''
        });

        //. 清除ico链接
        const clearIco = () => {
            formData.value.ico = '';
        };

        //. 重置模态框状态的方法
        const resetModalState = () => {
            showModal.value = false;
            isEditing.value = false;
            formData.value = {
                id: '',
                name: '',
                desc: '',
                src: '',
                permission: 0,
                ico: '',
                group: ''
            };
        };

        /// ==================== Toast 提示相关方法 ====================
        //. Toast 状态
        const toast = ref({
            show: false,
            message: '',
            type: 'info'
        });

        //. 存储定时器ID
        let toastTimer = null;

        //. 存储所有活动的弹窗
        const activeToasts = new Set();

        //. 显示 Toast 的函数
        const showToast = (message, type = 'info') => {
            //. 创建新的 Toast 元素
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.classList.add(type);
            toast.textContent = message;

            //. 创建独立的容器
            const container = document.createElement('div');
            container.className = 'toast-container';
            container.appendChild(toast);
            document.body.appendChild(container);

            //. 添加到活动弹窗集合
            activeToasts.add(toast);

            //. 触发重排以启动动画
            toast.offsetHeight;

            //. 设置定时器
            const timer = setTimeout(() => {
                //. 添加消失动画
                toast.style.animation = 'slideUpOut 0.3s ease forwards';

                //. 动画结束后移除元素
                toast.addEventListener('animationend', () => {
                    container.remove();
                    activeToasts.delete(toast);
                });
            }, 3000);

            //. 存储定时器ID
            toast.dataset.timerId = timer;
        };

        /// ==================== 生命周期 ====================

        //. 组件挂载后执行
        onMounted(() => {
            resetModalState();//. 重置模态框状态
            checkLoginStatus();//. 检查登录状态
            fetchGroupList();  //. 获取分类列表
            detect(); //. 检测设备类型
        });

        /// ==================== 返回值 ====================

        return {
            /// ==================== 数据管理相关方法 ====================
            filteredSites,
            editSite,
            deleteSite,
            selectedCategory,
            categories,
            changeCategory,
            groupList,
            isMobile,
            selectedPermission,
            changePermission,
            goToPage,
            /// ==================== 用户认证相关方法 ====================
            currentUser,
            logout,
            checkLoginStatus,
            /// ==================== 权限管理相关方法 ====================
            getPermissionText,
            getPermissionClass,
            /// ==================== 导航相关方法 ====================
            goBack,
            /// ==================== 搜索相关方法 ====================
            searchQuery,
            search,
            resetSearch,
            /// ==================== 模态框相关方法 ====================
            showModal,
            isEditing,
            formData,
            showAddModal,
            closeModal,
            saveData,
            clearIco,
            /// ==================== Toast 提示相关方法 ====================
            toast,
            showToast
        };
    }
});

app.mount('#app');

/**
 * 目录：
 * 全局变量定义
 * 数据管理相关方法
 * 用户认证相关方法
 * 权限管理相关方法
 * 导航相关方法
 * 搜索相关方法
 * 模态框相关方法
 * Toast 提示相关方法
 * 生命周期
 * 返回值
 */